<template>
  <div class="container">
    <div class="top">
      <span class="fullScreen">
        <svg-icon icon-class="full" @click="fullscreen" />
      </span>
      <span class="title">数据展示大屏</span>
      <span class="time">{{ nowtime }}</span>
    </div>
    <div class="main">
      <!-- 左侧 -->
      <div class="left">
        <div class="title">电商数据 <span class="en">Shell Data</span> </div>
        <div class="left-data">
          <div class="left-title">
            <div class="cn1">销售量</div>
            <span class="cn2">万元</span>
          </div>
          <div class="num">
            <div v-for="(item,index) in numData" :key="index" class="num-item">{{ item }}</div>
          </div>
        </div>
        <div class="left-data">
          <div class="left-title-2">
            <div class="cn3">完成百分比</div>
            <Progress :percentage="percentage" />
          </div>
        </div>
        <div class="title">热门搜索词 <span class="en">Top Search</span> </div>
        <div class="word-Echarts">
          <WordEchart />
        </div>
      </div>
      <!-- 中间 -->
      <div class="center">
        <div class="top">
          <BarEcharts />
        </div>
        <div class="bottom">
          <div class="items">
            <MapEcharts :echarts-data="mapData" />
          </div>
          <div class="items">
            <PieEcharts />
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="title">
          统计数据<span class="en">Statistics Data</span>
        </div>
        <div class="right-content">
          <div v-for="item in sellData" :key="item.id" class="items">
            <div class="left">
              <img class="img" :src="item.img" alt="">
            </div>
            <div class="right">
              <div class="value">{{ item.value }}</div>
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
        </div>
        <div class="title">
          大额订单Top <span class="en">Supper Orders</span>
        </div>
        <div class="table">
          <div class="head">
            <div class="head-item">时间</div>
            <div class="head-item">物品</div>
            <div class="head-item">数量</div>
            <div class="head-item">金钱</div>
          </div>
          <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="classOption">
            <div v-for="item in tableData" :key="item.id" class="row">
              <div class="row-item">{{ item.date }}</div>
              <div class="row-item">{{ item.name }}</div>
              <div class="row-item">{{ item.number }}</div>
              <div class="row-item">{{ item.price }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>

    <!-- 底部背景 -->
    <div class="bg-bottom">
      <Bg />
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import Progress from './components/progress'
import WordEchart from './components/wordEcharts'
import BarEcharts from './components/barEcharts'
import MapEcharts from './components/mapEcharts'
import { mapData, sellData, tableData } from './data.js'
import PieEcharts from './components/pieEcharts'
import Bg from './components/bg'
import vueSeamlessScroll from 'vue-seamless-scroll'// 滚动插件
export default {
  name: 'Dashboard',
  components: {
    WordEchart,
    Progress,
    BarEcharts,
    MapEcharts,
    PieEcharts,
    Bg,
    vueSeamlessScroll
  },
  data() {
    return {
      nowtime: '',
      numData: '1202018.4',
      percentage: 55,
      mapData: mapData,
      sellData: sellData,
      tableData: tableData,
      animation: false,
      timer: null

    }
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    this.nowTime()
    setTimeout(() => {
      this.percentage = 88
    }, 2500)
  },
  // mounted() {
  //   this.show()
  // },
  methods: {
    getTime(time) {
      const year = new Date(time).getFullYear()
      const month = new Date(time).getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      const day = new Date(time).getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      const hour = new Date(time).getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      const minu = new Date(time).getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const second = new Date(time).getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.nowtime = year + '-' + month + '-' + day + ' ' + hour + ':' + minu + ':' + second
    },
    nowTime() {
      this.getTime(new Date())
      setInterval(this.nowTime, 100)
      this.clear()
    },
    clear() {
      clearInterval(this.nowTime)
      this.nowTime = null
    },
    // 滚动
    // show() {
    //   this.timer = setInterval(() => {
    //     this.animation = true
    //     setTimeout(() => {
    //       this.tableData.push(this.tableData[0])
    //       this.tableData.shift()
    //       this.animation = false;
    //     }, 1000)
    //   }, 2000)
    // },
    fullscreen() {
      if (screenfull.isEnabled) {
        // 控制是否全屏的按钮
        screenfull.toggle(this.$refs.dashboard_main)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
  .container{
    widows: 100%;
    height: 100vh;
    position: relative;
    color: #fff;
    background: url('~@/assets/dashboardBG.png') 100% 100% no-repeat;
    .top{
      position: relative;
      .fullScreen{
        position: absolute;
        top: 20px;
        left: 30px;
        font-size: 25px;
        color:#fff;
      }
      .title{
        display: block;
        width: 70%;
        height: 122px;
        margin: 0 auto;
        text-align: center;
        line-height: 100px;
        font-size: 36px;
        background: url('~@/assets/titleBG.png') 100% 100% no-repeat;
        background-position: 50% 50%;
        z-index: 999;
      }
      .time{
        position: absolute;
        right: 30px;
        top: 20px;
        font-size: 20px;
        font-weight: 400;
      }
    }
    .main{
      display: flex;
      width: 100%;
      .left{
        width: 25%;
        height: 100%;
        padding: 10px 0 0 10px;
        box-sizing: border-box;
        .title{
          font-size: 22px;
          color: #9aa8d4;
          font-weight: 400;
          margin: 20px auto;
          .en{
            font-size: 20px;
            color: #404d69;
          }
        }
        .left-data{
          margin: 20px 0;
          padding-top: 2px;
          .left-title{
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            .cn1{
              color: #9aa8d4;
            }
            .cn2{
              color: #73aae5;
            }
          }
          .left-title-2{
            font-size: 16px;
            .cn3{
              color: #9aa8d4;
            }
          }
          .num{
              display: flex;
              margin-top: 20px;
              transition-duration:.5s;
              overflow: hidden;
              .num-item{
                font-family: 'Microsoft Yahei';
                font-size: 55px;
                font-weight: bold;
                color: rgb(255, 255, 255);
                margin-left: 3px;
                margin-right: 3px;
                box-sizing: content-box;
                width: 10%;
                text-align: center;
                background-color: rgb(15, 57, 107);
              }
            }
        }
        .word-Echarts{
            margin-top: 20px;
            position: relative;
            width: 100%;
            height: 390px;
            background-color: #16223c;
            z-index: 999;
          }
      }
      .center{
        width: 50%;
        .top{
          width: 95%;
          margin: 0 auto;
          height: 360px;
        }
        .bottom{
          width: 95%;
          margin:  0 auto;
          height: 360px;
          display: flex;
          .items{
            width: 50%;
          }
        }
      }
      .right{
        width: 25%;
        padding: 10px 0 0 10px;
        .title{
          font-size: 22px;
          color: #9aa8d4;
          font-weight: 400;
          margin: 10px 0;
          .en{
            font-family: Microsoft Yahei,Arial,sans-serif;
            font-size: 20px;
            color: #404d69;
            font-weight: 400;
          }
        }
        .right-content{
          width: 100%;
          height: 150px;
          margin-top: 20px;
          display: flex;
          flex-wrap: wrap;
          .items{
            width: 50%;
            height: 50%;
            display: flex;
            .left{
              width: 35%;
              .img{
                width: 100%;
                height: 100%;
              }
            }
            .right{
              width: 65%;
              padding-left: 15px;
              .value{
                font-size: 32px;
                font-weight: 700;
                color: #fff;
              }
              .text{
                margin-top: 4px;
                font-size: 12px;
                color: #b0c2f9;
              }
            }
          }
        }
        .anim{
            transition: all 1s ease-in-out;
            transform: translateY(-40px);
        }
        .table{
          position: relative;
          width: 100%;
          box-sizing: border-box;
          margin-top: 10px;
          overflow: hidden;
          .head{
            border: 1px solid rgb(51, 65, 107);
            font-size: 14px;
            color: rgb(154, 168, 212);
            height: 40px;
            z-index: 9999;

            .head-item{
              float: left;
              height: 100%;
              width: 25%;
              line-height: 40px;
              text-align: center;
              font-weight: 600;
              z-index: 9999;
            }
          }
          .row{
            overflow: hidden;
            width: 100%;
            font-size: 13px;
            text-align: center;
            color: rgb(154, 168, 212);
            border: 1px solid rgb(51, 65, 107);
            border-top: none;
            .row-item{
              float: left;
              width: 25%;
              height: 40px;
              text-align: center;
              line-height: 40px;
            }
          }
        }
      }
    }
    .bg-bottom{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 25%;
      z-index: 1;
    }
  }
</style>
